<template>
    <div>
        <!--<div class="crumbs">-->
        <!--    <el-breadcrumb separator="/">-->
        <!--        <el-breadcrumb-item><i class="el-icon-edit-outline"></i> 项目申请</el-breadcrumb-item>-->
        <!--    </el-breadcrumb>-->
        <!--</div>-->
        <!-- 主体 -->
        <div class="container" style="height: 100%; padding: 10px 10% 10px 0;">
            <el-button type="primary" style="float: right" @click="onSubmit">提交申请</el-button>
            <el-tabs tab-position="left" type="border-card" style="margin-top: 50px;">
                <el-tab-pane v-for="item in titleData" :key="item.sub" :label="item.name">
                    <!-- <keep-alive> -->
                    <component :is="item.sub" :ref="item.sub" :editRow="editRow"></component>
                    <!-- </keep-alive> -->
                </el-tab-pane>
            </el-tabs>
            <el-button type="primary" style="float: right" ref="onPreserve" @click="onPreserve">保存</el-button>
        </div>
    </div>
</template>

<script>
import EssentialInfo from './EssentialInfo.vue';
import Scheme from './Scheme.vue';
// import OrganizationInfo from './OrganizationInfo.vue';
import ProjectData from './ProjectData.vue';
import { registProjectAPI, changeStateAPI, applyNewProgectAPI, getTabListDetailsAPI, getUserTabListAPI } from '@/api/backStage.js';
import { mapState } from 'vuex';
export default {
    props: ['row', 'xmid'],
    name: 'apply',
    components: {
        EssentialInfo,
        Scheme,
        // OrganizationInfo,
        ProjectData
    },
    data() {
        return {
            flag: 0,
            index: '1',
            ip: '',
            editRow: {},
            titleData: [
                { name: '基本信息', sub: 'EssentialInfo' },
                { name: '方案摘要', sub: 'Scheme' },
                // { name: '机构信息', sub: 'OrganizationInfo' },
                { name: '项目资料', sub: 'ProjectData' }
            ]
        };
    },
    computed: {
        ...mapState({
            editFlag: state => {
                return state.applyFor.editFlag;
            },
            applyxmid: state => {
                return state.applyFor.applyxmid;
            },
            essentialInfo: state => {
                return state.applyFor;
            }
        })
    },
    mounted() {
        this.ready();
        this.getTabListDetails();
        this.editRow = this.row;
        this.$nextTick = () => {};
    },
    methods: {
        async getTabListDetails() {
            if (this.editFlag == 'edit') {
                const res = await getTabListDetailsAPI({ token: this.$store.state.user.token, xmid: this.row.xmid });
                this.$store.dispatch('applyFor/Edit', res.result[0]);
            }
        },
        // 获取ip
        ready() {
            let cip = returnCitySN['cip'];
            let cid = returnCitySN['cid'];
            let cname = returnCitySN['cname'];
            this.ip = cip;
        },
        // 获取列表
        async getUserTabListData() {
            const res = await getUserTabListAPI({
                token: this.$store.state.user.token,
                oprid: this.$store.state.user.oprid
            });
            if (res.code == 'succ') {
                this.tableList = res.result;
            } else {
                this.$message.error(res.message);
            }
        },
        // 提交
        async onSubmit() {
            console.log(1111);
            if (this.editFlag == 'new') {
                if (
                    this.$refs.EssentialInfo[0].form.xmbm != '' &&
                    this.$refs.EssentialInfo[0].form.name != '' &&
                    this.$refs.EssentialInfo[0].form.xmjc != '' &&
                    this.$refs.EssentialInfo[0].form.drugName != '' &&
                    this.$refs.EssentialInfo[0].form.enName != '' &&
                    this.$refs.EssentialInfo[0].form.dose != '' &&
                    this.$refs.EssentialInfo[0].form.phase != '' &&
                    this.$refs.Scheme[0].form.goal != '' &&
                    this.$refs.Scheme[0].form.scheme != '' &&
                    this.$refs.Scheme[0].form.count != '' &&
                    this.$refs.Scheme[0].form.bringInto != '' &&
                    this.$refs.Scheme[0].form.exclude != '' &&
                    this.$refs.Scheme[0].form.consent != ''
                ) {
                    // 提交成功this.flag += 1;
                    const res = await changeStateAPI({
                        token: this.$store.state.user.token,
                        xmid: localStorage.getItem('aaaxmid'),
                        xmzt: '0'
                    });
                    if (res.code == 'succ') {
                        this.$message.success('提交' + res.message);
                        this.$refs.EssentialInfo[0].form = {};
                        this.$refs.Scheme[0].form = {};
                    } else {
                        this.$message.error(res.message);
                    }
                } else {
                    this.$message.error('请输入页面中所有*的数据');
                }
            } else if (this.editFlag == 'edit') {
                if (
                    this.$refs.EssentialInfo[0].form.xmbm != '' &&
                    this.$refs.EssentialInfo[0].form.name != '' &&
                    this.$refs.EssentialInfo[0].form.xmjc != '' &&
                    this.$refs.EssentialInfo[0].form.drugName != '' &&
                    this.$refs.EssentialInfo[0].form.enName != '' &&
                    this.$refs.EssentialInfo[0].form.dose != '' &&
                    this.$refs.EssentialInfo[0].form.phase != '' &&
                    this.$refs.Scheme[0].form.goal != '' &&
                    this.$refs.Scheme[0].form.scheme != '' &&
                    this.$refs.Scheme[0].form.count != '' &&
                    this.$refs.Scheme[0].form.bringInto != '' &&
                    this.$refs.Scheme[0].form.exclude != '' &&
                    this.$refs.Scheme[0].form.consent != ''
                ) {
                    if (this.editRow.state == '0') {
                        const res = await changeStateAPI({
                            token: this.$store.state.user.token,
                            xmid: this.editRow.xmid,
                            xmzt: '1'
                        });
                        if (res.code == 'succ') {
                            this.$message.success('提交' + res.message);
                            this.$refs.EssentialInfo[0].form = {};
                            this.$refs.Scheme[0].form = {};
                        } else {
                            this.$message.error(res.message);
                        }
                    } else {
                        this.$message.warning('已经提交过申请');
                    }
                } else {
                    this.$message.error('请输入页面中所有*的数据');
                }
            }
        },
        // 保存
        async onPreserve() {
            if (this.editFlag == 'new') {
                if (
                    this.$refs.EssentialInfo[0].form.xmbm != '' &&
                    this.$refs.EssentialInfo[0].form.name != '' &&
                    this.$refs.EssentialInfo[0].form.xmjc != '' &&
                    this.$refs.EssentialInfo[0].form.drugName != '' &&
                    this.$refs.EssentialInfo[0].form.enName != '' &&
                    this.$refs.EssentialInfo[0].form.dose != '' &&
                    this.$refs.EssentialInfo[0].form.phase != '' &&
                    this.$refs.Scheme[0].form.goal != '' &&
                    this.$refs.Scheme[0].form.scheme != '' &&
                    this.$refs.Scheme[0].form.count != '' &&
                    this.$refs.Scheme[0].form.bringInto != '' &&
                    this.$refs.Scheme[0].form.exclude != '' &&
                    this.$refs.Scheme[0].form.consent != ''
                ) {
                    let obj = {
                        essentialInfo: this.$refs.EssentialInfo[0].form,
                        scheme: this.$refs.Scheme[0].form,
                        organizationInfo: {},
                        projectData: {}
                    };
                    const res = await registProjectAPI({
                        token: this.$store.state.user.token,
                        xmid: localStorage.getItem('aaaxmid'),
                        Params: obj
                    });
                    if (res.code == 'succ') {
                        this.$message.success('保存' + res.message);
                        this.getUserTabListData();
                    } else {
                        this.$message.error(res.message);
                    }
                } else {
                    this.$message.error('请输入页面中标*相对应得信息');
                }
            } else if (this.editFlag == 'edit') {
                if (
                    this.$refs.EssentialInfo[0].form.xmbm != '' &&
                    this.$refs.EssentialInfo[0].form.name != '' &&
                    this.$refs.EssentialInfo[0].form.xmjc != '' &&
                    this.$refs.EssentialInfo[0].form.drugName != '' &&
                    this.$refs.EssentialInfo[0].form.enName != '' &&
                    this.$refs.EssentialInfo[0].form.dose != '' &&
                    this.$refs.EssentialInfo[0].form.phase != '' &&
                    this.$refs.Scheme[0].form.goal != '' &&
                    this.$refs.Scheme[0].form.scheme != '' &&
                    this.$refs.Scheme[0].form.count != '' &&
                    this.$refs.Scheme[0].form.bringInto != '' &&
                    this.$refs.Scheme[0].form.exclude != '' &&
                    this.$refs.Scheme[0].form.consent != ''
                ) {
                    let obj = {
                        essentialInfo: this.$refs.EssentialInfo[0].form,
                        scheme: this.$refs.Scheme[0].form,
                        organizationInfo: {},
                        projectData: {}
                    };
                    const res = await registProjectAPI({
                        token: this.$store.state.user.token,
                        xmid: this.editRow.xmid,
                        Params: obj
                    });
                    if (res.code == 'succ') {
                        this.$message.success(res.message);
                        this.getUserTabListData();
                    } else {
                        this.$message.error(res.message);
                    }
                } else {
                    this.$message.error('请输入页面中标*相对应得信息');
                }
            }
        }
    }
};
</script>

<style>
.el-card__header {
    padding: 7px 20px;
}
.el-tabs--border-card {
    border: none;
    box-shadow: none;
}
.el-tabs--left.el-tabs--border-card .el-tabs__header.is-left {
    border: 1px solid #dfe4ed;
}
.el-tabs__item {
    font-size: 20px;
    height: 60px;
    line-height: 60px;
}
.el-icon-arrow-left:before,
.el-icon-arrow-right:before {
    content: '';
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item {
    color: #222;
}
</style>
